<template>
  <div class="Dinfor">
    <swiper :options="swiperOption"  ref="mySwiper" @slideChange="slideChange()">
      <swiper-slide class="diswiper-slide-defalut swiper-no-swiping" >
        <div class="dintitle">
             <NavBarHeader class='navBarHeader'></NavBarHeader>
             <div class="dintCon">
          <div class="dintleft">
            <div class="dintleftfix">
             <img src="../../../assets/img/header/dynamicInfor.png" class="dynamicInfor" alt="" srcset="">
               <!-- <div class="dintlefttitle">{{newsTitle}}</div>
              <div class="dintime">{{newsTime}}</div>
              <div class="dinline"></div>
              <div class="dincon">
                {{newsDesc}}
              </div>
              <div class="seedetails" @click="seeDetails(newsId)">查看详情</div> -->
            </div>
          </div >
          <div class="dintright">
            <div class="dintrightShow">
              <!-- <div>
                <div class="dinrtitletext">动态资讯</div>
                <div class="dinline"></div>
              </div> -->
              <div class="dintrightcon">
                <div v-for="(item,index) in newsList" class="dirightcon" @click="setShow(index,item.img)">
                  <div class="dintrcontitle" >
                    <div class="dintext">{{item.title}}</div>
                    <div class="dinrtitlecolor"></div>
                  </div>
                  <div class="dintrcontime">{{item.date}}</div>
                </div>
              </div>
            </div>
          </div>
          <div @click="nowNext" v-if="isActive3">
              <lottie
                :height="49"
                :width="49"
                class="iconImg"
                :options="defaultOptions"
                @animCreated="handleAnimation"
              />
          </div>
          </div>
        </div>
      </swiper-slide>
      <!-- <swiper-slide v-show="isActive3" class="diswiper-slide-defalut2" >
        <div class="dinBtmz">  
          <div class="dinBtmcon">
            <div class="dinBtmleft">
              <div>{{ isActivetext }}</div>
              <div class="dinline"></div>
            </div>
            <div class="dinBtmright">
              <div
                :class="{ dinBtmset: isActive, dinBtmsets: true }"
                @click="setDin(1)"
              >
                企业新闻
              </div>
              <div
                :class="{ dinBtmset: isActive2, dinBtmsets: true }"
                @click="setDin(2)"
              >
                行业资讯
              </div>
              <div
                :class="{ dinBtmset: isActive3, dinBtmsetl: true }"
                @click="setDin(3)"
              >
                成功案例
              </div>
            </div>
          </div>
          <div v-if="isActive3" class="dinBtmlist2">
            <swiper
              class="swiper-no-swiping"
              :options="swiperOption4"
              ref="mySwiper4"
              @slideChange="slideChange4()"
            >
             <swiper-slide class="vswiper" v-for="(item,index) in compNews" :key="index" >
                <div class="dblcase2bg" > 
                  <div class="dblcase2" @click="goDetails(item.id)">
                  <div class="dblcasetext">
                    <div class="dblcasetime">{{item.date}}</div>
                    <div class="dblcasetextcon">
                      <div class="dbtitle">{{item.title}}</div>
                      <div class="dinline"></div>
                          <div class="dblcasecon" v-html="item.desc"></div>
                    </div>
                    <div class="dblcasetimgs">
                      <img
                        class="dblcasetimg"
                        :src="item.img"
                        alt=""
                      />
                    </div>
                  </div>
                </div></div>
              </swiper-slide>
               <div
            class="swiper-pagination"
            slot="pagination">
            </div>
            </swiper>
            <div></div>
          </div>
           <div @click="nowNext">
              <lottie
                :height="49"
                :width="49"
                class="iconImg"
                :options="defaultOptions"
                @animCreated="handleAnimation"
              />
            </div>
        </div>
      </swiper-slide> -->
      <!-- <swiper-slide v-if="isActive3" class="diswiper-slide-defalut3">
        <div class="dinBtm2">
          <div class="dinBtmcon2">
            <div class="dinBtmleft">
              <div>轰隆隆部分央企客户</div>
              <div class="dinline"></div>
            </div>
          </div>
          <div class="alists">
            <div class="alist1">
              <div class="alist1text" style="animation-duration: 1s; animation-delay: 0.3s !important">
                <div class="btmbg">
                  <img
                    class="img"
                    src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/newsDlicon1.svg"
                    alt=""
                  />
                </div>
                <div class="title">中国中铁集团旗下</div>
                <div class="bline"></div>
              </div>
              <div style="animation-duration: 1s; animation-delay: 0.3s !important" class="alist1hover animated flipInY">
                <div class="title">中国中铁集团旗下</div>
                <div class="bline"></div>
                <div class="content">中国中铁一局集团</div>
                <div class="content">中国中铁三局集团</div>
                <div class="content">中国中铁四局集团</div>
                <div class="content">中铁北京工程局集团</div>
                <div class="content">中铁隧道股份有限公司</div>
              </div>
            </div>
            <div class="alist2">
              <div class="alist2text">
                <div class="btmbg">
                  <img
                    class="img"
                    src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/newsDlicon2.svg"
                    alt=""
                  />
                </div>
                <div class="title">中国铁建集团旗下</div>
                <div class="bline"></div>
              </div>
              <div style="animation-duration: 1s; animation-delay: 0.3s !important" class="alist2hover animated flipInY">
                <div class="title">中国铁建集团旗下</div>
                <div class="bline"></div>
                <div class="content">中铁十四局集团</div>
                <div class="content">中铁十六局集团</div>
                <div class="content">中铁十八局集团</div>
                <div class="content">中铁二十一局集团</div>
                <div class="content">中铁二十二局集团</div>
              </div>
            </div>
            <div class="alist3">
              <div class="alist3text">
                <div class="btmbg">
                  <img
                    class="img"
                    src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/newsDlicon3.svg"
                    alt=""
                  />
                </div>
                <div class="title">中国建筑集团旗下</div>
                <div class="bline"></div>
              </div>
              <div style="animation-duration: 1s; animation-delay: 0.3s !important" class="alist3hover animated flipInY">
                <div class="title">中国建筑集团旗下</div>
                <div class="bline"></div>
                <div class="content">中国建筑一局(集团)有限公司</div>
                <div class="content">中国建筑第三工程局有限公司</div>
                <div class="content">中国建筑第八工程局有限公司</div>
                <div class="content">中建铁路投资建设集团有限公司</div>
                <div class="content"></div>
              </div>
            </div>
            <div class="alist4">
              <div class="alist4text">
                <div class="btmbg">
                  <img
                    class="img4"
                    src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/newsDlicon4.svg"
                    alt=""
                  />
                </div>
                <div class="title">中国交建集团旗下</div>
                <div class="bline"></div>
              </div>
              <div style="animation-duration: 1s; animation-delay: 0.3s !important" class="alist4hover animated flipInY">
                <div class="title">中国交建集团旗下</div>
                <div class="bline"></div>
                <div class="content">中交一公局集团</div>
                <div class="content">中交三公局集团</div>
                <div class="content">中交四公局集团</div>
                <div class="content">中交第一航务工程局</div>
                <div class="content"></div>
              </div>
            </div>
          </div>
        
         <div @click="nowNext">
              <lottie
                :height="49"
                :width="49"
                class="iconImg"
                :options="defaultOptions"
                @animCreated="handleAnimation"
              />
            </div>
        
        </div>
      </swiper-slide> -->
      <!-- <swiper-slide v-show="isActive3" class="diswiper-slide-defalut3 swiper-no-swiping" id="ahome">
      </swiper-slide> -->
    </swiper>
    <div class="dinBtmz" v-show="isActive3">  
          <div class="dinBtmcon">
            <div class="dinBtmleft">
              <div>{{ isActivetext }}</div>
              <div class="dinline"></div>
            </div>
            <div class="dinBtmright">
              <div
                :class="{ dinBtmset: isActive, dinBtmsets: true }"
                @click="setDin(1)"
              >
                企业新闻
              </div>
              <div
                :class="{ dinBtmset: isActive2, dinBtmsets: true }"
                @click="setDin(2)"
              >
                行业资讯
              </div>
              <div
                :class="{ dinBtmset: isActive3, dinBtmsetl: true }"
                @click="setDin(3)"
              >
                成功案例
              </div>
            </div>
          </div>
          <div v-if="isActive3" class="dinBtmlist2">
            <swiper
              class="swiper-no-swiping"
              :options="swiperOption4"
              ref="mySwiper4"
              @slideChange="slideChange4()"
            >
             <swiper-slide class="vswiper" v-for="(item,index) in compNews" :key="index" >
                <div class="dblcase2bg" > 
                  <div class="dblcase2" @click="goDetails(item.id)">
                  <div class="dblcasetext">
                    <div class="dblcasetime">{{item.date}}</div>
                    <div class="dblcasetextcon">
                      <div class="dbtitle">{{item.title}}</div>
                      <div class="dinline"></div>
                          <div class="dblcasecon" v-html="item.desc"></div>
                    </div>
                    <div class="dblcasetimgs">
                      <img
                        class="dblcasetimg"
                        :src="item.img"
                        alt=""
                      />
                    </div>
                  </div>
                </div></div>
              </swiper-slide>
               <div
            class="swiper-pagination"
            slot="pagination">
            </div>
            </swiper>
            <div></div>
          </div>
           <!-- <div @click="nowNext">
              <lottie
                :height="49"
                :width="49"
                class="iconImg"
                :options="defaultOptions"
                @animCreated="handleAnimation"
              />
            </div> -->
        </div>
     <div class="dinBtm2" v-if="isActive3">
          <div class="dinBtmcon2">
            <div class="dinBtmleft">
              <div>轰隆隆部分央企客户</div>
              <div class="dinline"></div>
            </div>
          </div>
          <div class="alists">
            <div class="alist1">
              <div class="alist1text" style="animation-duration: 1s; animation-delay: 0.3s !important">
                <div class="btmbg">
                  <img
                    class="img"
                    src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/newsDlicon1.svg"
                    alt=""
                  />
                </div>
                <div class="title">中国中铁集团旗下</div>
                <div class="bline"></div>
              </div>
              <div style="animation-duration: 1s; animation-delay: 0.3s !important" class="alist1hover animated flipInY">
                <div class="title">中国中铁集团旗下</div>
                <div class="bline"></div>
                <div class="content">中国中铁一局集团</div>
                <div class="content">中国中铁三局集团</div>
                <div class="content">中国中铁四局集团</div>
                <div class="content">中铁北京工程局集团</div>
                <div class="content">中铁隧道股份有限公司</div>
              </div>
            </div>
            <div class="alist2">
              <div class="alist2text">
                <div class="btmbg">
                  <img
                    class="img"
                    src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/newsDlicon2.svg"
                    alt=""
                  />
                </div>
                <div class="title">中国铁建集团旗下</div>
                <div class="bline"></div>
              </div>
              <div style="animation-duration: 1s; animation-delay: 0.3s !important" class="alist2hover animated flipInY">
                <div class="title">中国铁建集团旗下</div>
                <div class="bline"></div>
                <div class="content">中铁十四局集团</div>
                <div class="content">中铁十六局集团</div>
                <div class="content">中铁十八局集团</div>
                <div class="content">中铁二十一局集团</div>
                <div class="content">中铁二十二局集团</div>
              </div>
            </div>
            <div class="alist3">
              <div class="alist3text">
                <div class="btmbg">
                  <img
                    class="img"
                    src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/newsDlicon3.svg"
                    alt=""
                  />
                </div>
                <div class="title">中国建筑集团旗下</div>
                <div class="bline"></div>
              </div>
              <div style="animation-duration: 1s; animation-delay: 0.3s !important" class="alist3hover animated flipInY">
                <div class="title">中国建筑集团旗下</div>
                <div class="bline"></div>
                <div class="content">中国建筑一局(集团)有限公司</div>
                <div class="content">中国建筑第三工程局有限公司</div>
                <div class="content">中国建筑第八工程局有限公司</div>
                <div class="content">中建铁路投资建设集团有限公司</div>
                <div class="content"></div>
              </div>
            </div>
            <div class="alist4">
              <div class="alist4text">
                <div class="btmbg">
                  <img
                    class="img4"
                    src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/newsDlicon4.svg"
                    alt=""
                  />
                </div>
                <div class="title">中国交建集团旗下</div>
                <div class="bline"></div>
              </div>
              <div style="animation-duration: 1s; animation-delay: 0.3s !important" class="alist4hover animated flipInY">
                <div class="title">中国交建集团旗下</div>
                <div class="bline"></div>
                <div class="content">中交一公局集团</div>
                <div class="content">中交三公局集团</div>
                <div class="content">中交四公局集团</div>
                <div class="content">中交第一航务工程局</div>
                <div class="content"></div>
              </div>
            </div>
          </div>
        
         <!-- <div @click="nowNext">
              <lottie
                :height="49"
                :width="49"
                class="iconImg"
                :options="defaultOptions"
                @animCreated="handleAnimation"
              />
            </div> -->
        
        </div>
    <div class="dinBtm3" v-show="isActive3">
          <div class="dinBtmcon2">
            <div class="dinBtmleft">
              <div>轰隆隆部分其他客户</div>
              <div class="dinline"></div>
            </div>
          </div>
          <div class="dinBtmconright">
            <swiper
              :options="swiperOption3"
              ref="mySwiper3"
              @slideChange="slideChange3()"
            >
              <swiper-slide>
                <div class="companyList">
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon1.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon2.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon3.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon4.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon5.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon6.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon7.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon8.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon10.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon11.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon12.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon13.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon14.png"
                      alt=""
                    />
                  </div>
                    <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon9.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon15.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon16.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon17.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon18.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon19.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon20.png"
                      alt=""
                    />
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="companyList">
                
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon21.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon22.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon23.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon24.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon25.png"
                      alt=""
                    />
                  </div>

                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon26.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon27.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon28.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon29.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon30.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon31.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon32.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon33.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon34.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon35.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon36.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon37.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon38.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon39.png"
                      alt=""
                    />
                  </div>
                  <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon40.png"
                      alt=""
                    />
                  </div>

                </div>
              </swiper-slide>
               <swiper-slide>
                <div class="companyList">
                <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon41.png"
                      alt=""
                    />
                </div>
                <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon43.png"
                      alt=""
                    />
                </div>
                <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon44.png"
                      alt=""
                    />
                </div>
                <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon45.png"
                      alt=""
                    />
                </div>
                <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon46.png"
                      alt=""
                    />
                </div>
                <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon47.png"
                      alt=""
                    />
                </div>
                <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon48.png"
                      alt=""
                    />
                </div>
                <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon49.png"
                      alt=""
                    />
                </div>
                 <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon50.png"
                      alt=""
                    />
                </div>
                 <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon51.png"
                      alt=""
                    />
                </div>
                <div class="cplcon">
                    <img
                      class="cplimg"
                      src="https://file.honglonglong.com.cn/hll_newPc/companyicon/cmpicon52.png"
                      alt=""
                    />
                </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
          <div class="dinBtmcontip">
            <div class="leftarrow" @click="blackData">
              <img
                class="lefticon"
                src="../../../assets/img/header/leftArrow.png"
                alt=""
              />
            </div>
            <ul class="upli">
              <li
                :class="{ upliset: upset, uplis: !upset }"
                @click="upliset(1)"
              >
                <span class="uplinow"></span>
              </li>
              <li
                :class="{ upliset: upset2, uplis: !upset2 }"
                @click="upliset(2)"
              >
              <span class="uplinow"></span>
              </li>
              <li
                :class="{ upliset: upset3, uplis: !upset3 }"
                @click="upliset(3)"
              >
                <span class="uplinow"></span>
              </li>
                <span class="uplinow"></span>
              </li>
            </ul>
            <div class="rightarrow" @click="goData">
              <img
                class="righticon"
                src="../../../assets/img/header/rightArrow.png"
                alt=""
              />
            </div>
          </div>
        </div>
    <div class="dinBtma" v-show="!isActive3" >
          <div class="dinBtmcon">
            <div class="dinBtmleft">
              <div>{{ isActivetext }}</div>
              <div class="dinline"></div>
            </div>
            <div class="dinBtmright">
              <div
                :class="{ dinBtmset: isActive, dinBtmsets: true }"
                @click="setDin(1)"
              >
                企业新闻
              </div>
              <div
                :class="{ dinBtmset: isActive2, dinBtmsets: true }"
                @click="setDin(2)"
              >
                行业资讯
              </div>
              <div
                :class="{ dinBtmset: isActive3, dinBtmsetl: true }"
                @click="setDin(3)"
              >
                成功案例
              </div>
            </div>
          </div>
          <div v-show="isActive" class="dinBtmlist1" >
             <div class="vswiper" v-for="(item,index) in compNews" :key="index" >
                <div class="dblcase2bg" > 
                  <div class="dblcase2" @click="goDetails(item.id)">
                  <div class="dblcasetext">
                    <div class="dblcasetime">{{item.date}}</div>
                    <div class="dblcasetextcon">
                      <div class="dbtitle">{{item.title}}</div>
                      <div class="dinline"></div>
                      <!-- <div > -->
                          <div class="dblcasecon" v-html="item.desc"></div>
                      <!-- </div> -->
                    </div>
                    <div class="dblcasetimgs">
                      <img
                        class="dblcasetimg"
                        :src="item.img"
                        alt=""
                      />
                    </div>
                  </div>
                </div></div>
              </div>
          </div>
          <div v-show="isActive2" class="dinBtmlist1" >
               <div class="vswiper" v-for="(item,index) in compNews" :key="index" >
                <div class="dblcase2bg" > 
                  <div class="dblcase2" @click="goDetails(item.id)">
                  <div class="dblcasetext">
                    <div class="dblcasetime">{{item.date}}</div>
                    <div class="dblcasetextcon">
                      <div class="dbtitle">{{item.title}}</div>
                      <div class="dinline"></div>
                      <!-- <div > -->
                          <div class="dblcasecon" v-html="item.desc"></div>
                      <!-- </div> -->
                    </div>
                    <div class="dblcasetimgs">
                      <img
                        class="dblcasetimg"
                        :src="item.img"
                        alt=""
                      />
                    </div>
                  </div>
                </div></div>
              </div>
          
            <div></div>
          </div>
    </div>
    <FooterBar v-if="show" class="footerBar"></FooterBar>
  </div>
</template>
<script>
const animationData = require("@/assets/js/data.json");
import FooterBar from "../../../components/FooterBar";
import NavBarHeader from "../../../components/NavBarHeader";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import {
  getNewsfeed,
  getSuccessfulCaseList,
  setSubmit,
} from "./../../../apis/api.js";
import "swiper/css/swiper.css";
export default {
  name: "Dinfor",
  data() {
    return {
      defaultOptions: { animationData: animationData, loop: true },
      swiperOption: {
        // pagination:'.swiper-pagination',
        notNextTick: true, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: "vertical", // 水平方向移动
        grabCursor: true, // 鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: false, // Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        slidesPerView: 1, // 设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        observer: true,
        initialSlide: 0,
        mousewheel: true, // 开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
        height: window.innerHeight, // 高度设置，占满设备高度
        // autoHeight: true, // 高度随内容变化
        resistanceRatio: 200, // 抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
        observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
        // autoplayDisableOnInteraction: false, //鼠标划过之后继续轮播
        speed: 1000, // 滚动速度
      },
      // 成功案例
      swiperOption4: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        preventClicksPropagation: true,
        loop: true,
        mousewheel: false,
        autoplay: true, //可设置数值来指定播放速度
        speed: 2000, // 切换图片速度
        slidesPerView: 3, //一屏显示三张
        slidesPerGroup: 3, //一屏滚动
        autoplayDisableOnInteraction: false,
        on: {
          slideChangeTransitionEnd: function () {
            this.autoplay.start(); //就加这个玩意儿
          },
        },
      },
      // 部分其他客户
      swiperOption3: {
        // pagination:'.swiper-pagination',
        notNextTick: true, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: "horizontal", // 水平方向移动
        grabCursor: true, // 鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: false, // Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoplay: true,
        loop: true,
        // autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        slidesPerView: 1, // 设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        observer: true,
        initialSlide: 0,
        mousewheel: false, // 开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
        // height: window.innerHeight, // 高度设置，占满设备高度
        // autoHeight: true, // 高度随内容变化
        resistanceRatio: 0, // 抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
        observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
        autoplayDisableOnInteraction: false, //鼠标划过之后继续轮播
        speed: 2000, // 滚动速度
        on: {
          slideChangeTransitionEnd: function () {
            this.autoplay.start(); //就加这个玩意儿
          },
        },
      },
      show: false,
      defalut_top: 0,
      isSet: 0,
      isActivetext: "企业新闻",
      isActive: true,
      isActive2: false,
      isActive3: false,
      activeIndex2: 0,
      activeIndex4: 0,
      upset: true,
      upset2: false,
      upset3: false,
      imgUrl: "",
      newsTitle: "",
      newsDesc: "",
      newsTime: [],
      newsList: [],
      compNews: [],
    };
  },

  components: {
    Swiper,
    SwiperSlide,
    FooterBar,
    NavBarHeader,
  },
  watch:{
   $route(to,from){
    this.$router.go(0)
   }
  },
  computed: {
    // swiper() {
    //   return this.$refs.mySwiper.$swiper;
    // },
  },
  methods: {
    nowNext() {
      this.$refs.mySwiper.$swiper.slideNext();
    },
    handleAnimation: function (animate) {
      this.animObj = animate;
      console.log(animate); //这里可以看到 lottie 对象的全部属性
    },
    async getSuccessfulCaseList(type) {
      var params = {
        type: type,
        page: 1,
      };
      try {
        let res = await getSuccessfulCaseList(params);
        if (res.data.result == "1") {
          this.compNews = res.data.body.list;
          console.log(this.compNews);
          // this.newsList = res.data.body.list.slice(0, 5);
          // this.$store.commit("userInfo", JSON.stringify(res.data.body));
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getNewfeed(params) {
      // 登录的api接口
      var params = {
        hot: 1,
        type: 1,
        page: 1,
      };
      try {
        let res = await getSuccessfulCaseList(params);
        if (res.data.result == "1") {
          this.newsList = res.data.body.list.splice(0, 5);
          this.imgUrl = this.newsList[0].img;
          this.newsDesc = this.newsList[0].desc;
          this.newsTitle = this.newsList[0].title;
          this.newsTime = this.newsList[0].date;
          this.newsId = this.newsList[0].id;
          // this.$store.commit("userInfo", JSON.stringify(res.data.body));
          console.log(res);
        }
      } catch (e) {
        console.log(e);
      }
    },
    seeDetails(newsId) {
      console.log(newsId);
      const news = this.$router.resolve({
        name: "p_dindetail",
        query: { id: newsId },
      });
      window.open(news.href, "_blank");
    },
    goDetails(data) {
      console.log(data);
      const news = this.$router.resolve({
        name: "p_dindetail",
        query: { id: data },
      });
      window.open(news.href, "_blank");
    },
    blackData() {
      this.$refs.mySwiper3.$swiper.slidePrev();
    },
    goData() {
      this.$refs.mySwiper3.$swiper.slideNext();
    },
    setShow(index, img) {
      // this.isSet = index;
      this.imgUrl = this.newsList[index].img;
      this.newsTitle = this.newsList[index].title;
      this.newsDesc = this.newsList[index].desc;
      this.newsTime = this.newsList[index].date;
      this.newsId = this.newsList[index].id;
      const news = this.$router.resolve({
        name: "p_dindetail",
        query: { id: this.newsId },
      });
      window.open(news.href, "_blank");
    },
    setDin(data) {
      console.log(data);
      if (data == 1) {
        this.isActive = true;
        this.isActive2 = false;
        this.isActive3 = false;
        this.isActivetext = "企业新闻";
        this.show = true;
        this.getSuccessfulCaseList(1);
        this.$refs.mySwiper.$swiper.mousewheel.disable();
      } else if (data == 2) {
        this.isActive = false;
        this.isActive2 = true;
        this.isActive3 = false;
        this.isActivetext = "行业资讯";
        this.show = true;
        this.getSuccessfulCaseList(2);
        this.$refs.mySwiper.$swiper.mousewheel.disable();
      } else if (data == 3) {
        this.isActive = false;
        this.isActive2 = false;
        this.isActive3 = true;
        this.show = true;
        this.isActivetext = "成功案例";
        this.getSuccessfulCaseList(3);
        this.$refs.mySwiper.$swiper.mousewheel.disable();
      }

      this.$refs.mySwiper5.$swiper.slideTo(0, 10, false);
    },

    upliset(data) {
      if (data == 1) {
        this.upset = true;
        this.upset2 = false;
        this.upset3 = false;
        this.$refs.mySwiper3.$swiper.slideTo(1, 1000, false);
      } else if (data == 2) {
        this.upset = false;
        this.upset2 = true;
        this.upset3 = false;
        this.$refs.mySwiper3.$swiper.slideTo(2, 1000, false);
      } else if (data == 3) {
        this.upset = false;
        this.upset2 = false;
        this.upset3 = true;
        this.$refs.mySwiper3.$swiper.slideTo(3, 1000, false);
      }
    },
    scrollFunction() {
      this.domObj = document.getElementById("ahome"); // 通过id获取要设置的di
      if (this.domObj.attachEvent) {
        // IE
        this.domObj.attachEvent("onmousewheel", this.mouseScroll);
      } else if (this.domObj.addEventListener) {
        this.domObj.addEventListener("DOMMouseScroll", this.mouseScroll, false);
      }
      "mousewheel",
        (this.domObj.onmousewheel = this.domObj.onmousewheel =
          this.mouseScroll);
    },
    mouseScroll(event) {
      // google 浏览器下

      let detail = event.wheelDelta || event.detail; // 判读滚动方向
      console.log(detail);
      if (detail > 0) {
        this.$router.afterEach((to, from, next) => {
          window.scrollTo(0, 0);
        });
        this.$refs.mySwiper.$swiper.mousewheel.enable();
      }
    },
    slideChange(e) {
      const activeIndex = this.$refs.mySwiper.$swiper.activeIndex;
      // if (activeIndex === 3 && this.isActive3) {
      //   this.show = true;
      //   this.scrollFunction();
      //   this.$refs.mySwiper.$swiper.mousewheel.disable();
      // } else if (!this.isActive3 && activeIndex == 0) {
      //   this.show = true;
      //   this.$refs.mySwiper.$swiper.mousewheel.disable();
      // } else {
      //   this.show = false;
      // }
    },
    // 成功案例
    slideChange4(e) {
      this.activeIndex4 = this.$refs.mySwiper4.$swiper.activeIndex;
    },
    // 底部轮播图
    slideChange3(e) {
      this.activeIndex3 = this.$refs.mySwiper3.$swiper.activeIndex;
      // console.log(this.activeIndex3);
      if (this.activeIndex3 === 1 || this.activeIndex3 == 4) {
        this.upset = true;
        this.upset2 = false;
        this.upset3 = false;
      } else if (this.activeIndex3 === 2) {
        this.upset = false;
        this.upset2 = true;
        this.upset3 = false;
      } else if (this.activeIndex3 === 3) {
        this.upset = false;
        this.upset2 = false;
        this.upset3 = true;
      }
    },
    handleScroll() {
      // 页面滚动距顶部距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var scroll = scrollTop - this.i;
      this.i = scrollTop;
      if (scroll < 0) {
        if (scrollTop < 10) {
          this.$refs.mySwiper.$swiper.mousewheel.enable();
        }
      } else {
        // console.log("down");
      }
    },
  },
  created() {
    this.getNewfeed();
    console.log("this.$route.query.id");
    console.log(this.$route.query.id);
    if (this.$route.query.id) {
      this.setDin(this.$route.query.id);
    } else {
      this.getSuccessfulCaseList(1);
    }
  },
  activated() {
    console.log("aaaaaaaaaaaa");
  },
  mounted() {
    console.log(this.$route.query.id);
    if (this.$route.query.id) {
      this.setDin(this.$route.query.id);
    } else {
      this.getSuccessfulCaseList(1);
    }

    console.log("Current Swiper instance object", this.swiper);
    // this.$refs.mySwiper.$swiper.mousewheel.enable();
  },
};
</script>
<style lang="scss" scoped>
.Dinfor {
  .swiper-pagination {
    position: absolute;
    bottom: 0;
    cursor: pointer;
    // z-index: 100;
  }
  .swiper-pagination-bullet {
    width: 155px !important;
    height: 155px !important;
  }
  .dynamicInfor {
    width: 300px;
    height: 58px;
  }
  .iconImg {
    cursor: pointer;
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 49px;
    height: 49px;
    z-index: 10;
  }
  .navBarHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  .swiper-scrollbar {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
    z-index: 500;
    height: 5px;
    width: 10%;
  }
  // overflow:scroll;
  // .swiper_box {
  //   position: relative;
  // }
  .swiper-container {
    padding: 0 -200px;
  }
  .diswiper-slide-defalut {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  .diswiper-slide-defalut2 {
    height: 100vh;
    overflow: hidden;
  }
  .diswiper-slide-defalut3 {
    height: 100vh;
    overflow: hidden;
  }

  .dintitle {
    width: 100vw;
    height: 100vh;
    display: flex;
    background: url("https://file.honglonglong.com.cn/hll_newPc/Home/dtzxBg.png")
      100% 100%;
    background-size: cover;
    .dintCon {
      width: 1300px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      // background: url("https://file.honglonglong.com.cn/hll_newPc/Home/dtzxBg.png")
      //   100% 100%;
      // background-size: cover;
    }
    .dintleft {
      position: relative;
      width: 55vw;
      .dintleftimg {
        width: 55vw;
        height: 100vh;
      }
      .dintleftfix {
        width: 426px;
        position: absolute;
        top: 50%;
        left: 0;
        .dintlefttitle {
          width: 526px;
          font-size: 30px;
          font-weight: 500;
          color: #ffffff;
        }
        .dintime {
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          margin-top: 10px;
        }
        .dinline {
          width: 28px;
          height: 3px;
          background: #ff855b;
          margin-top: 10px;
        }
        .dincon {
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          margin-top: 60px;
        }
        .seedetails {
          cursor: pointer;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          width: 149px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
          border-radius: 4px;
          margin-top: 80px;
        }
      }
    }
    .dintright {
      position: relative;
      // height: 100vh;
      .dintrightShow {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 50%;
        right: 45%;
        transform: translate(5%, -50%);
        .dinrtitletext {
          font-size: 26px;
          font-weight: 400;
          color: #ffffff;
        }
        .dinline {
          width: 28px;
          height: 3px;
          background: #ff855b;
          margin-top: 20px;
        }
        .dintrightcon {
          font-size: 23px;
          font-weight: 500;
          color: #ffffff;
          margin-top: 120px;
          .dirightcon {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .dintrcontitle {
              cursor: pointer;
              position: relative;
              width: 370px;
              height: 50px;
              line-height: 50px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-right: 20px;
              
              .dinrtitlecolor {
                display: none;
              }
            }

            .dintrcontitle:hover {
              color: #ff855b;
              
              .dinrtitlecolor {
                display: block;
                z-index: 100;
                position: absolute;
                left: 20px;
                top: 20px;
                width: 260px;
                height: 30px;
                background: rgba(255, 133, 91, 0.3);
              }
            }

            .dintext {
              max-width: 360px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .dintext1 {
              color: #ff855b;
              max-width: 260px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .dintrcontime {
              flex-shrink: 0;
              height: 20px;
              line-height: 20px;
              font-size: 16px;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  .dinBtmz {
    width: 1300px;
    margin: 0 auto;
    background: #ffffff;
    .dinBtmcon {
      display: flex;
      justify-content: space-between;
      font-size: 26px;
      margin-top: 66px;
      .dinBtmleft {
        font-weight: 400;
        color: #000000;
        .dinline {
          width: 28px;
          height: 3px;
          background: #ff855b;
          margin-top: 10px;
        }
      }
      .dinBtmright {
        display: flex;
        align-items: center;
        font-weight: 600;
        color: #c0c4cc;
        .dinBtmsets {
          cursor: pointer;
          margin-right: 46px;
        }
        .dinBtmset {
          cursor: pointer;
          color: #303133;
        }
        .dinBtmsetl {
          cursor: pointer;
        }
      }
    }
    .dinBtmlist2 {
      width: 1302px;
      height: 720px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 10%;
      .dblcase2bg {
        cursor: pointer;
        position: relative;
        height: 530px;
        width: 400px;
        .dblcase2 {
          position: absolute;
          top: 10px;
          transition: 0.4s all ease-in;
          cursor: pointer;
          width: 100%;
          height: 530px;
          background: #f5f5f5;
          padding: 20px 0;
          .dblcasetext {
            margin: 0 10%;
            margin-top: 1%;
            .dblcasetime {
              font-size: 27px;
              font-weight: 500;
              color: #dcdcdc;
            }
            .dblcasetextcon {
              font-size: 23px;
              font-weight: 500;
              color: #303133;
              margin-top: 6%;
              .dinline {
                width: 28px;
                height: 3px;
                background: #ff855b;
                margin-top: 20px;
                margin-bottom: 20px;
              }
              .dblcasecon {
                width: 280px;
                min-height: 60px;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                display: -moz-box;
                -moz-line-clamp: 3;
                -moz-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: break-word;
                word-break: break-all;
                font-size: 16px;
                font-weight: 400;
                color: #909399;
                margin-top: 6px;
                .atitle {
                  font-weight: 500;
                }
              }
            }
            .dblcasetimgs {
              margin-top: 20px;
            }
            .dblcasetimg {
              width: 100%;
              height: 260px;
              object-fit: cover;
            }
          }
        }
      }
      .dblcase2bg:hover {
        position: relative;
        height: 530px;
        .dblcase2 {
          transition: 0.4s all ease-in;
          cursor: pointer;
          position: absolute;
          top: 0;
          width: 100%;
          height: 530px;
          background: #202735;
          padding: 20px 0;
          .dblcasetext {
            margin: 0 10%;
            .dblcasetime {
              font-size: 27px;
              font-weight: 500;
              color: #dcdcdc;
            }
            .dblcasetextcon {
              font-size: 23px;
              font-weight: 500;
              color: #fff;
              margin-top: 6%;
              .dinline {
                width: 28px;
                height: 3px;
                background: #ff855b;
                margin-top: 20px;
                margin-bottom: 20px;
              }
              .dblcasecon {
                width: 280px;
                min-height: 60px;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                display: -moz-box;
                -moz-line-clamp: 3;
                -moz-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: break-word;
                word-break: break-all;
                font-size: 16px;
                font-weight: 400;
                color: #909399;
                margin-top: 6px;
                .atitle {
                  font-weight: 500;
                }
              }
            }
            .dblcasetimgs {
              margin-top: 20px;
            }
            .dblcasetimg {
              width: 100%;
              height: 260px;
              object-fit: cover;
            }
          }
        }
      }

      .btmline {
        position: absolute;
        bottom: -5%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 136px;
        height: 4px;
        background: #e9e9e9;
        border-radius: 4px;
        .setbtmline {
          position: absolute;
          bottom: -5%;
          left: 0;
          transform: translate(-50%, 0);
          width: 40px;
          height: 4px;
          background: #1f2327;
          border-radius: 4px;
        }
        .setbtmline2 {
          position: absolute;
          bottom: -5%;
          left: 0;
          transform: translate(-50%, 0);
          width: 80px;
          height: 4px;
          background: #1f2327;
          border-radius: 4px;
        }
        .setbtmline3 {
          position: absolute;
          bottom: -5%;
          left: 0;
          // transform: translate(-50%, 0);
          width: 100%;
          height: 4px;
          background: #1f2327;
          border-radius: 4px;
        }
      }
    }
  }

  .dinBtma {
    position: relative;
    height: 100%;
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 100px;
    margin: 0 auto;
    .dinBtmcon {
      margin: 0 auto;
      width: 1300px;
      display: flex;
      justify-content: space-between;
      font-size: 26px;
      margin-top: 66px;
      .dinBtmleft {
        font-weight: 400;
        color: #000000;
        .dinline {
          width: 28px;
          height: 3px;
          background: #ff855b;
          margin-top: 10px;
        }
      }
      .dinBtmright {
        display: flex;
        align-items: center;
        font-weight: 600;
        color: #c0c4cc;
        .dinBtmsets {
          cursor: pointer;
          margin-right: 46px;
        }
        .dinBtmset {
          cursor: pointer;
          color: #303133;
        }
        .dinBtmsetl {
          cursor: pointer;
        }
      }
    }
    .dinBtmlist1 {
      width: 1400px;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      margin-top: 51px;
      margin-left: 100px;
      .vswiper {
        width: 373px;
        height: 530px;
        background: #f5f5f5;
        margin: 36px 0;
        margin-right: 90px;
      }
      .dblcase2bg {
        position: relative;
        height: 530px;
        .dblcase2 {
          position: absolute;
          top: 10px;
          transition: 0.4s all ease-in;
          cursor: pointer;
          width: 100%;
          height: 530px;
          background: #f5f5f5;
          padding: 20px 0;
          .dblcasetext {
            margin: 0 10%;
            .dblcasetime {
              font-size: 27px;
              font-weight: 500;
              color: #dcdcdc;
            }
            .dblcasetextcon {
              font-size: 23px;
              font-weight: 500;
              color: #303133;
              margin-top: 6%;
              .dinline {
                width: 28px;
                height: 3px;
                background: #ff855b;
                margin-top: 20px;
                margin-bottom: 20px;
              }
              .dblcasecon {
                width: 280px;
                min-height: 60px;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                display: -moz-box;
                -moz-line-clamp: 3;
                -moz-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: break-word;
                word-break: break-all;
                font-size: 16px;
                font-weight: 400;
                color: #909399;
                margin-top: 6px;
                .atitle {
                  font-weight: 500;
                }
              }
            }
            .dblcasetimgs {
              margin-top: 20px;
            }
            .dblcasetimg {
              width: 100%;
              height: 260px;
              object-fit: cover;
            }
          }
        }
      }
      .dblcase2bg:hover {
        // width: 90%;
        position: relative;
        height: 530px;
        .dblcase2 {
          transition: 0.4s all ease-in;
          cursor: pointer;
          position: absolute;
          top: 0;
          // right: -10%;
          width: 100%;
          height: 530px;
          background: #202735;
          padding: 20px 0;
          .dblcasetext {
            margin: 0 10%;
            .dblcasetime {
              font-size: 27px;
              font-weight: 500;
              color: #dcdcdc;
            }
            .dblcasetextcon {
              font-size: 23px;
              font-weight: 500;
              color: #fff;
              margin-top: 6%;
              .dinline {
                width: 28px;
                height: 3px;
                background: #ff855b;
                margin-top: 20px;
                margin-bottom: 20px;
              }
              .dblcasecon {
                width: 280px;
                min-height: 60px;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                display: -moz-box;
                -moz-line-clamp: 3;
                -moz-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: break-word;
                word-break: break-all;
                font-size: 16px;
                font-weight: 400;
                color: #909399;
                margin-top: 6px;
                .atitle {
                  font-weight: 500;
                }
              }
            }
            .dblcasetimgs {
              margin-top: 20px;
            }
            .dblcasetimg {
              width: 100%;
              height: 260px;
              object-fit: cover;
            }
          }
        }
      }

      .btmline {
        position: absolute;
        bottom: -5%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 136px;
        height: 4px;
        background: #e9e9e9;
        border-radius: 4px;
        .setbtmline {
          position: absolute;
          bottom: -5%;
          left: 0;
          transform: translate(-50%, 0);
          width: 40px;
          height: 4px;
          background: #1f2327;
          border-radius: 4px;
        }
        .setbtmline2 {
          position: absolute;
          bottom: -5%;
          left: 0;
          transform: translate(-50%, 0);
          width: 80px;
          height: 4px;
          background: #1f2327;
          border-radius: 4px;
        }
        .setbtmline3 {
          position: absolute;
          bottom: -5%;
          left: 0;
          // transform: translate(-50%, 0);
          width: 100%;
          height: 4px;
          background: #1f2327;
          border-radius: 4px;
        }
      }
    }
  }
  .dinBtm2 {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #ffffff;
    .dinBtmcon2 {
      display: flex;
      justify-content: space-between;
      font-size: 26px;
      margin: 0 auto;
      width: 1300px;
      margin-top: 66px;
      .dinBtmleft {
        font-weight: 400;
        color: #000000;
        .dinline {
          width: 28px;
          height: 3px;
          background: #ff855b;
          margin-top: 10px;
        }
      }
    }
    .alists {
      margin: 0 auto;
      width: 1300px;
      display: flex;
      position: absolute;
      top: 20%;
      left: 10%;
      right: 10%;
      .alist1 {
        transition: 1s;
        cursor: pointer;
        width: 25%;
        height: 505px;
        background: #ffffff;
        border: 2px solid #ebeef5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-size: 100% 100%;
        .alist1hover {
          display: none;
        }
        .alist1text {
          display: flex;
          flex-direction: column;
          align-items: center;
          .img {
            width: 106px;
            height: 108px;
          }
          .title {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-top: 56px;
          }
          .bline {
            width: 28px;
            height: 3px;
            background: #ff855b;
            margin-top: 56px;
          }
        }
      }
      .alist1:hover {
        transition: 1s;
        cursor: pointer;
        width: 25%;
        height: 505px;
        background: url("https://file.honglonglong.com.cn/hll_newPc/footerBar/banner4.1.png")
          no-repeat;
        background-size: 100% 100%;
        border: 2px solid #ebeef5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .alist1text {
          display: none;
        }
        .alist1hover {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          letter-spacing: 2px;
          .title {
            font-weight: 500;
          }
          .bline {
            width: 28px;
            height: 3px;
            background: #ff855b;
            margin: 10px 0;
          }
          .content {
            margin-top: 22px;
          }
        }
      }
      .alist2 {
        cursor: pointer;
        width: 25%;
        height: 505px;
        background: #ffffff;
        border: 2px solid #ebeef5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-size: 100% 100%;
        .alist2hover {
          display: none;
        }
        .alist2text {
          display: flex;
          flex-direction: column;
          align-items: center;
          .img {
            width: 106px;
            height: 105px;
          }
          .title {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-top: 56px;
          }
          .bline {
            width: 28px;
            height: 3px;
            background: #ff855b;
            margin-top: 56px;
          }
        }
      }
      .alist2:hover {
        cursor: pointer;
        width: 25%;
        height: 505px;
        background: url("https://file.honglonglong.com.cn/hll_newPc/footerBar/banner4.2.png")
          no-repeat;
        background-size: 100% 100%;
        border: 2px solid #ebeef5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .alist2text {
          display: none;
        }
        .alist2hover {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          letter-spacing: 2px;
          .title {
            font-weight: 500;
          }
          .bline {
            width: 28px;
            height: 3px;
            background: #ff855b;
            margin: 10px 0;
          }
          .content {
            margin-top: 22px;
          }
        }
      }
      .alist3 {
        cursor: pointer;
        width: 25%;
        height: 505px;
        background: #ffffff;
        border: 2px solid #ebeef5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-size: 100% 100%;
        .alist3hover {
          display: none;
        }
        .alist3text {
          display: flex;
          flex-direction: column;
          align-items: center;
          .img {
            width: 143px;
            height: 112px;
          }
          .title {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-top: 56px;
          }
          .bline {
            width: 28px;
            height: 3px;
            background: #ff855b;
            margin-top: 56px;
          }
        }
      }
      .alist3:hover {
        cursor: pointer;
        width: 25%;
        height: 505px;
        background: url("https://file.honglonglong.com.cn/hll_newPc/footerBar/banner4.3.png")
          no-repeat;
        background-size: 100% 100%;
        border: 2px solid #ebeef5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .alist3text {
          display: none;
        }
        .alist3hover {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          letter-spacing: 2px;
          .title {
            font-weight: 500;
          }
          .bline {
            width: 28px;
            height: 3px;
            background: #ff855b;
            margin: 10px 0;
          }
          .content {
            margin-top: 22px;
          }
        }
      }
      .alist4 {
        cursor: pointer;
        width: 25%;
        height: 505px;
        background: #ffffff;
        border: 2px solid #ebeef5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-size: 100% 100%;
        .alist4hover {
          display: none;
        }
        .alist4text {
          display: flex;
          flex-direction: column;
          align-items: center;
          .img4 {
            width: 105px;
            height: 115px;
          }
          .title {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-top: 56px;
          }
          .bline {
            width: 28px;
            height: 3px;
            background: #ff855b;
            margin-top: 56px;
          }
        }
      }
      .alist4:hover {
        cursor: pointer;
        width: 25%;
        height: 505px;
        background: url("https://file.honglonglong.com.cn/hll_newPc/footerBar/banner4.4.png")
          no-repeat;
        background-size: 100% 100%;
        border: 2px solid #ebeef5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .alist4text {
          display: none;
        }
        .alist4hover {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          letter-spacing: 2px;
          .title {
            font-weight: 500;
          }
          .bline {
            width: 28px;
            height: 3px;
            background: #ff855b;
            margin: 10px 0;
          }
          .content {
            margin-top: 22px;
          }
        }
      }
    }
  }
  .dinBtm3 {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: url(https://file.honglonglong.com.cn/hll_newPc/footerBar/banner4bg.png)
      no-repeat;
    background-size: cover;
    object-fit: cover;
    .dinBtmcon2 {
      margin: 0 auto;
      width: 1300px;
      margin-top: 66px;
      display: flex;
      justify-content: space-between;
      font-size: 26px;
      .dinBtmleft {
        font-weight: 400;
        color: #ffffff;
        .dinline {
          width: 28px;
          height: 3px;
          background: #ff855b;
          margin-top: 10px;
        }
      }
    }
    .dinBtmconright {
      position: absolute;
      top: 66px;
      right: 15%;
      width: 50%;
      .companyList {
        width: 900px;
        display: flex;
        flex-wrap: wrap;
        .cplcon {
          width: 170px;
          height: 130px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.08);
          display: flex;
          justify-content: center;
          align-items: center;
          .cplimg {
            max-width: 107px;
            max-height: 68px;
          }
          .cplimg:hover {
            max-width: 107px;
            max-height: 68px;
            transition: 0.4s all ease-in;
            cursor: pointer;
            transform: scale(1.4); /*以y轴为中心旋转*/
          }
        }
      }
    }
    .dinBtmcontip {
      position: absolute;
      top: 80%;
      left: 50%;
      transform: translate(-50%, -20%);
      display: flex;
      align-items: center;
      .leftarrow {
        .lefticon {
          width: 40px;
          height: 17px;
          cursor: pointer;
        }
        // width: 36px;
        // height: 1px;
        // background: #ffffff;
        // cursor: pointer;
      }
      .upli {
        display: flex;
        align-items: center;
        .uplis {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 26px;
          height: 26px;
          margin-left: 20px;
          cursor: pointer;
          .uplinow {
            width: 6px;
            height: 6px;
            background: #d8d8d8;
            border-radius: 50%;
          }
        }
        .upliset {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          border: 1px solid #979797;
          margin-left: 20px;
          cursor: pointer;
          .uplinow {
            width: 6px;
            height: 6px;
            background: #d8d8d8;
            border-radius: 50%;
          }
        }
      }
      .rightarrow {
        margin-left: 20px;
        .righticon {
          width: 40px;
          height: 17px;
          cursor: pointer;
        }
      }
    }
  }
  .dbtitle {
    height: 60px;
    width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    // white-space: nowrap;
  }
}
</style>